<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
  * {
            box-sizing: border-box;
}
        div.search {padding: 30px 0;}

        .fo1 {
            position: absolute;
            top: 10%;
            left: 30%;
            width: 300px;
            margin: 0 auto;
        }
        .fo2 {
            position: absolute;
            top: 10%;
            left: 60%;
            width: 300px;
            margin: 0 auto;
        }
        #btu1{
            position: absolute;
            top: 5%;
            left: 5%;
            width: 200px;
            height: 100px;
        }


        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
            border: none;
            outline: none;
        }


        /*搜索框1*/
        .bar1 {background: #ffffff;}
        .bar1 input {
            border: 2px solid #7BA7AB;
            border-radius: 5px;
            background: #F9F0DA;
            color: #9E9C9C;
        }
        #but1 {
            top: 0;
            right: 0;
            background: #7BA7AB;
            border-radius: 0 5px 5px 0;
            height: 42px;
            width: 42px;
            position: absolute;
            border: none;
            outline: none;
        }
      
        .bar2{
            position: absolute;
            top: 150px;
            left: 400px;
            width: 900px;
            height: 400px;
            border: 1px solid #C1C1C1;
        }
        #btext1{
            position: absolute;
            left: 5%;
            top: 7%;
            height: 400px;
            font-family: Microsoft YaHei;
            font-weight: bolder;
            font-size: 20px;
            color: #000;
        }
        #btext2{
            position: absolute;
            left: 5%;
            top: 50%;
            font-family: Microsoft YaHei;
            font-weight: bolder;
            font-size: 20px;
            color: #000;
        }
        #xq1{
            position: absolute;
            left: 20%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #xq2{
            position: absolute;
            left: 31%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #xq3{
            position: absolute;
            left: 42%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #xq4{
            position: absolute;
            left: 53%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #xq5{
            position: absolute;
            left: 64%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #xq6{
            position: absolute;
            left: 75%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #xq7{
            position: absolute;
            left: 86%;
            top: 11%;
            width: 90px;
            height: 50px;
            background-color: #cecdcd;
        }
        #ziduan{
            position: absolute;
            left: 19%;
            top: 6%;
            font-family: Microsoft YaHei;
            font-weight: lighter;
            font-size: 15px;
            color: #000;
        }
        #yr1{
            position: absolute;
            left: 20%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr2{
            position: absolute;
            left: 31%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr3{
            position: absolute;
            left: 42%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr4{
            position: absolute;
            left: 53%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr5{
            position: absolute;
            left: 64%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr6{
            position: absolute;
            left: 75%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr7{
            position: absolute;
            left: 86%;
            top: 25%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr21{
            position: absolute;
            left: 20%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr22{
            position: absolute;
            left: 31%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr23{
            position: absolute;
            left: 42%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr24{
            position: absolute;
            left: 53%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr25{
            position: absolute;
            left: 64%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr26{
            position: absolute;
            left: 75%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        #yr27{
            position: absolute;
            left: 86%;
            top: 38%;
            width: 90px;
            height: 50px;
            border: 1px solid #C1C1C1;
        }
        h1{
            position: absolute;
            left: 19%;
            top: 6%;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 15px;
            color: #000;
        }
        #shij1{
            position: absolute;
            left: 20%;
            top: 56%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #shij2{
            position: absolute;
            left: 40%;
            top: 56%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #shij3{
            position: absolute;
            left: 60%;
            top: 56%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #shij4{
            position: absolute;
            left: 80%;
            top: 56%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #sjtext{
            position: absolute;
            left: 19%;
            top: 6%;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 15px;
            color: #000;
        }
        #shij21{
            position: absolute;
            left: 20%;
            top: 75%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #shij22{
            position: absolute;
            left: 40%;
            top: 75%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #shij23{
            position: absolute;
            left: 60%;
            top: 75%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
        #shij24{
            position: absolute;
            left: 80%;
            top: 75%;
            width: 150px;
            height: 60px;
            border: 1px solid #C1C1C1;
        }
</style>
  <div class="search bar1">
      <img id="btu1" src="./img/logo.png">
     <form class="fo1">
         <input type="text" placeholder="请输入您要搜索的景点">
         <div id="but1"></div>
     </form>
     <div class="search bar12">
       <form class="fo2">
           <input type="text" placeholder="请输入您的旅行团类型：精品团/散团">
           <div id="but1"></div>
       </form>
<div class="bar2" style="display: none;">
<p id="btext1">选择参观日期</p>
<p id="btext2">选择入场时段</p>
<div id="xq1"><p id="ziduan">星期一</p></div>
<div id="xq2"><p id="ziduan">星期二</p></div>
<div id="xq3"><p id="ziduan">星期三</p></div>
<div id="xq4"><p id="ziduan">星期四</p></div>
<div id="xq5"><p id="ziduan">星期五</p></div>
<div id="xq6"><p id="ziduan">星期六</p></div>
<div id="xq7"><p id="ziduan">星期天</p></div>

<div id="yr1"><h1></h1></div>
<div id="yr2"><h1></h1></div>
<div id="yr3"><h1></h1></div>
<div id="yr4"><h1></h1></div>
<div id="yr5"><h1></h1></div>
<div id="yr6"><h1></h1></div>
<div id="yr7"><h1></h1></div>

<div id="yr21"><h1></h1></div>
<div id="yr22"><h1></h1></div>
<div id="yr23"><h1></h1></div>
<div id="yr24"><h1></h1></div>
<div id="yr25"><h1></h1></div>
<div id="yr26"><h1></h1></div>
<div id="yr27"><h1></h1></div>

<div id="shij1"><p id="sjtext">08:30~09:30</p></div>
<div id="shij2"><p id="sjtext">09:31~10:30</p></div>
<div id="shij3"><p id="sjtext">10:31~11:30</p></div>
<div id="shij4"><p id="sjtext">11:31~12:30</p></div>

<div id="shij21"><p id="sjtext">12:31~13:30</p></div>
<div id="shij22"><p id="sjtext">13:31~14:30</p></div>
<div id="shij23"><p id="sjtext">14:31~15:30</p></div>
<div id="shij24"><p id="sjtext">15:31~16:30</p></div>
</div>
<script>
let but1=document.querySelector('#but1')
let bar2=document.querySelector('.bar2')
but1.addEventListener('click',function(){
bar2.style.display='block'
})
let h1=document.querySelectorAll('h1')
    
    setInterval(function(){
        let date = new Date()
        let a=date.getMonth()+1
        let b=date.getDate()
        let i
    for(i=0;i<h1.length;i++){
        h1[i].innerHTML=a+'月'+b+'日'
        b++
    }
    },1000)
</script>
</body>
</html>